define(['jq','common'], () => {
    //首部复用
    $('header').load('../html/header.html')
    //尾部复用
    $('footer').load('../html/footer.html')
    setTimeout(()=>{
        class Cart {
            constructor() {
                this.cartTable = document.querySelector('.cartTable')
                this.tbody = document.querySelector('tbody')
                this.selectAll = document.querySelector('.selectAll')
                this.dlAll = document.querySelector('.dlAll')
                this.totalNum = document.querySelector('.totalNum')
                this.money = document.querySelector('.money')
                this.em = document.querySelector('em')
                this.cartlist = JSON.parse(localStorage.getItem('cart')) || []
                this.init()
            }
            init() {
                this.render()
                this.handleClick()
                this.emcount()
                // this.changeValue()
            }
            render() {
                this.tbody.innerHTML = ''
                // console.log(this.cartlist);
                if (this.cartlist.length > 0) {
                    this.cartlist.forEach((item) => {
                        this.tbody.innerHTML += `
                    <tr>
                    <td><input type="checkbox" value="" class="select" data-id="${item.goods_id}" ${item.is_select?'checked':''} /></td>
                    <td>
                        <img src="${item.img_small_logo}" >
                        <span class="hide">${item.title}</span>
                    </td>
                    <td><span>¥${item.price}</span></td>
                    <td>
                        <span class="sub" data-id="${item.goods_id}">-</span>
                        <input type="text" value="${item.cart_number}" class="txt" data-id="${item.goods_id}"/>
                        <span class="add" data-id="${item.goods_id}">+</span>
                    </td>
                    <td><span class="price">¥ ${item.price * item.cart_number}</span></td>
                    <td><span class="dlAll" data-id="${item.goods_id}">删除</span></td>
                    </tr>
                    `
                    })
                } else {
                    this.tbody.innerHTML += `
                <tr height="100">
                <td colspan="6">
                    <img src="../img/gouwuche.png">
                    <h1 style="margin: 20px 0 60px 0;">你的购物车里什么也没有哦~</h1>
                    <a href="../index.html" style="background:#ca141d;padding:15px 60px;color:#fff;">去逛逛</a>
                </td>
               </tr>
                `
                }
    
                this.count()
                this.inputValue()
                localStorage.setItem('cart', JSON.stringify(this.cartlist))
                this.emcount()
            }
            handleClick() {
                this.cartTable.onclick = (e) => {
                    var e = e || window.event
                    var target = e.target || e.srcElement
                    //做全选功能
                    if (target.className == 'selectAll') {
                        // console.log(target.checked);
                        this.cartlist.forEach((item) => {
                            item.is_select = target.checked
                        })
                        this.render()
                    }
                    //做单选
                    if (target.className == 'select') {
                        // console.log(target.checked);
                        let targetId = target.dataset.id
                        let goods = this.cartlist.find((item) => {
                            return item.goods_id == targetId
                        })
                        goods.is_select = target.checked
                        // console.log(this.cartlist);
                        this.selectAll.checked = this.cartlist.every((item) => {
                            return item.is_select
                        })
                        this.render()
                    }
                    //增加数量
                    if (target.className == 'add') {
                        let targetId = target.dataset.id
                        let goods = this.cartlist.find((item) => {
                            return item.goods_id == targetId
                        })
                        if (goods.cart_number == goods.goods_number) {
                            alert('库存只有这么多了哦~')
                            return false
                        }
                        goods.cart_number++
                        this.render()
                    }
                    //减少数量
                    if (target.className == 'sub') {
                        let targetId = target.dataset.id
                        let goods = this.cartlist.find((item) => {
                            return item.goods_id == targetId
                        })
                        if (goods.cart_number == 1) {
                            return false
                        }
                        goods.cart_number--
                        this.render()
                    }
                    //删除功能
                    if (target.className == 'dlAll') {
                        // 使用filter()方法过滤，要留下没有选中的
                        // 注意点：过滤出来的就是没有选中的
                        let res = this.cartlist.filter(item => {
                            return item.is_select == false
                        })
                        // 把没有选中的赋值给了数组，就把选中的覆盖了(删除)
                        this.cartlist = res
                        // 如果数组的长度为0，就把全选的状态改为false
                        if (!this.cartlist.length) {
                            this.selectAll.checked = false
                        }
                        this.render()
                    }
                    //移入收藏夹
                    if (target.className == 'collection') {
                        let res = this.cartlist.filter(item => {
                            return item.is_select == true
                        })
                        // console.log(res);
                        let goods = res[0]
                        let targetId = goods.goods_id
                        console.log(goods);
                        console.log(targetId);
                        let collectlist = JSON.parse(localStorage.getItem('collection')) || []
                        if(collectlist.length > 0){
                            let result = collectlist.some((item) => {
                                return item.goods_id == targetId
                            })
                            if (result) {
                                alert('该商品已收藏')
                            } else {
                                collectlist.push(goods)
                            }
                        }else {
                            collectlist.push(goods)
                        }
                        localStorage.setItem('collection',JSON.stringify(collectlist))
                    }
                    //结算
                    if (target.className == 'calc') {
                        if (this.totalNum.innerHTML > 0) {
                            location.href = './../html/calculate.html'
                        }
                    }
                }
            }
            //总价
            count() {
                let totalNum = 0
                let money = 0
                this.cartlist.forEach((res) => {
                    if (res.is_select) {
                        totalNum += res.cart_number
                        money += res.price * res.cart_number
                    }
                })
                this.selectAll.checked = this.cartlist.every((item) => {
                    return item.is_select
                })
                this.totalNum.innerHTML = totalNum
                this.money.innerHTML = money
            }
            //输入框
            inputValue() {
                var txt = document.querySelectorAll('.txt')
                // console.log(txt);
                txt.forEach((item) => {
                    item.onblur = () => {
                        // console.log(item.value);
                        let targetId = item.dataset.id
                        let goods = this.cartlist.find((res) => {
                            return res.goods_id == targetId
                        })
                        // console.log(goods);
                        this.render()
    
                    }
                })
            }
            emcount() {
                let list = JSON.parse(localStorage.getItem('cart')) || []
                let count = 0
                list.map((item) => {
                    count += item.cart_number
                })
                this.em.innerHTML = count
            }
    
        }
        new Cart()
        
    },500)
})